{extend name="common/head"/}
{block name="body"}
<div class="container-fluid p-t-15">

	<div class="row">

		<div class="col-lg-12">
			<div class="card">
				<header class="card-header">
					<div class="card-title">配置列表</div>
				</header>
				<div class="card-body">
					<div id="toolbar" class="toolbar-btn-action">
						<button id="btn_add" type="button" class="btn btn-primary m-r-5" onclick="sadd()">
							<span class="mdi mdi-plus" aria-hidden="true"></span>新增
						</button>
						<button id="btn_delete" type="button" class="btn btn-danger">
							<span class="mdi mdi-window-close" aria-hidden="true"></span>删除
						</button>
					</div>
					<table id="tb_departments"></table>
				</div>
			</div>
		</div>

	</div>

</div>
{/block}
{block name="script"}
{include file="common/footer" base="base" /}
<!--以下是tree-grid的使用示例-->
<link href="{__ADMIN__}/js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script src="{__ADMIN__}/js/jquery-treegrid/jquery.treegrid.min.js" type="text/javascript"></script>
<script src="{__ADMIN__}/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"
		type="text/javascript"></script>
<script type="text/javascript">
	$('#tb_departments').bootstrapTable({
		classes: 'table table-bordered table-hover table-striped',
		url: '/admin/conf/index',
		method: 'get',
		dataType: 'json', // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
		uniqueId: 'id',
		idField: 'id', // 每行的唯一标识字段
		toolbar: '#toolbar', // 工具按钮容器
		//clickToSelect: true,     // 是否启用点击选中行
		showColumns: true, // 是否显示所有的列
		showRefresh: true, // 是否显示刷新按钮
		showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
		pagination: true, // 是否显示分页
		sortOrder: "asc", // 排序方式

		// 传递参数
		queryParams: function(params) {
			return {
				limit: params.limit, // 每页数据量
				offset: params.offset, // sql语句起始索引
				page: (params.offset / params.limit) + 1,
				sort: params.sort, // 排序的列名
				sortOrder: params.order // 排序方式'asc' 'desc'
			};
		},
		sidePagination: "client", // 分页方式：client客户端分页，server服务端分页
		pageNumber: 1, // 初始化加载第一页，默认第一页
		pageSize: 10, // 每页的记录行数
		pageList: [10, 25, 50, 100], // 可供选择的每页的行数
		//search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

		//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
		//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

		columns: [{
			field: 'example',
			checkbox: true // 是否显示复选框
		}, {
			field: 'id',
			title: 'ID',
			// 居中显示
			align: 'center',
			// 是否排序
			sortable: true
		}, {
			field: 'title',
			align: 'center',
			title: '配置名称'
		},{
			field: 'name',
			align: 'center',
			title: '配置标识（新增的模板文件名称需与标识名称一致）'
		}, {
			field: 'operate',
			align: 'center',
			title: '操作',
			formatter: btnGroup, // 自定义方法
			events: {
				'click .edit-btn': function(event, value, row, index) {
					editUser(row);
				},
				'click .conf-btn': function(event, value, row, index) {
					conf(row);
				},
				'click .del-btn': function(event, value, row, index) {
					delUser(row);
				}
			}
		}],
	});

	function btnGroup() {
		let html =
				'<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
				'<a href="#!" class="btn btn-xs btn-default m-r-5 conf-btn" title="配置" data-toggle="tooltip"><i class="mdi mdi-code-greater-than-or-equal"></i></a>' +
				'<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
		return html;
	}

	function sadd() {
		parent.$(parent.document).data('multitabs').create({
			iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
			title : '添加配置',                     // 标题（可选），没有则显示网址
			url : '/admin/conf/add'                    // 链接（必须），如为外链，强制为info页
		}, true);
	}

	// 操作方法 - 编辑
	function editUser(data) {
		parent.$(parent.document).data('multitabs').create({
			iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
			title : '编辑管理员',                     // 标题（可选），没有则显示网址
			url : '/admin/conf/add?id=' + data.id                    // 链接（必须），如为外链，强制为info页
		}, true);
	}
	// 操作方法 - 编辑
	function conf(data) {
		parent.$(parent.document).data('multitabs').create({
			iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
			title : '编辑管理员',                     // 标题（可选），没有则显示网址
			url : '/admin/conf/edit?id=' + data.id                    // 链接（必须），如为外链，强制为info页
		}, true);
	}
	// 操作方法 - 删除
	function delUser(data) {
		console.log(data.id);
		$.confirm({
			title: '提示',
			content: '您确定要删除吗？',
			icon: 'mdi mdi-alert',
			animation: 'scale',
			closeAnimation: 'zoom',
			buttons: {
				confirm: {
					text: '确认，取消',
					btnClass: 'btn-orange',
					action: function() {
						$.ajax({
							url: "/admin/conf/delete",
							type: 'post',
							data: { id: data.id },
							success: function (e) {
								if (e.code == 0) {
									$(".tree-table").bootstrapTable('refresh');
								}
							}
						})
					}
				},
				'取消': function() {

				}
			}
		});
	}

	function update(id) {
		parent.$(parent.document).data('multitabs').create({
			iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
			title : '编辑节点',                     // 标题（可选），没有则显示网址
			url : '/admin/menu/edit?pid=' + id                    // 链接（必须），如为外链，强制为info页
		}, true);
	}

	function test() {
		var selRows = $treeTable.bootstrapTable("getSelections");
		if (selRows.length == 0) {
			alert("请至少选择一行");
			return;
		}
		console.log(selRows);

		var postData = "";
		$.each(selRows, function (i) {
			postData += this.id;
			if (i < selRows.length - 1) {
				postData += "， ";
			}
		});
		alert("你选中行的 id 为：" + postData);
	}
</script>
{/block}
</body>
</html>